<template>
  <view class="freeStore-list"> 
    <view class="main-wrap">
      <view v-if="list && list.length > 0">
        <block v-for="(item, index) in list" :key="index">
          <view class="item-wrap" :style="{'border-bottom': list.length == index + 1 ? 'none' : '2rpx solid #E1E1E1' }">
            <view class="member-info">
              <view class="left">
                <image :src="item.avatar" mode="" class="img"></image>
              </view>
              <view class="middle">
                <view class="top">
                  <text class="name">{{item.nickName}}</text>
                  <text class="mobile">{{item.mobile}}</text>
                </view>
                <view class="bottom">
                  <text class="date">{{item.qualificationDate}}</text>
                </view>
              </view>
              <view class="right">
                <view class="status-info" style="width: 100rpx;">
                  <text :class="{'status-wait': item.qualificationStatus == 0, 'status-success': item.qualificationStatus == 1, 'status-fail': item.qualificationStatus == 2, 'status-reject': item.qualificationStatus == 3}">{{item.qualificationStatusName}}</text>
                </view>
              </view>
            </view>
          </view>
        </block>
      </view>
      <view class="noDate" v-else>
        <image :src="this.$store.state.imgBaseUrl + '/notShop.png'" mode="" class="img"></image>
        <text style="color: #999999;">暂无数据</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getFreeStoreListApi } from '@/service/freeStore/freeStore.servies.js'
export default {
  name: 'freeStore_list',
  data () {
    return {
      list: [], // 免费商户列表
      pageInfo: { // 分页数据
        current: 1,
        size: 10,
        total: 0
      }
    }
  },
  onLoad () {
    // 
  },
  mounted () {
    this.getFreeStoreList(); // 获取免费商户列表
  },
  onReachBottom () {
    if (this.pageInfo.current == 1) {
      if (this.pageInfo.total == this.list.length) {
        uni.showToast({
          title: '已经到底了',
          icon: 'none'
        })
      }
      return false;
    } else if (this.pageInfo.total > this.list.length) {
      this.getFreeStoreList();
    } else if (this.pageInfo.current != 1) {
      uni.showToast({
        title: '已经到底了',
        icon: 'none'
      })
    }
  },
  methods: {
    getFreeStoreList () { // 获取免费商户列表
      uni.showLoading();
      let params = {
        current: this.pageInfo.current,
        size: this.pageInfo.size
      };
      getFreeStoreListApi(params, res => {
        if (res.status == 0) {
          if (this.pageInfo.current == 1) {
            this.list = res.data.records;
          } else {
            this.list = this.list.concat(res.data.records)
          }
          this.pageInfo.total = res.data.total;
          if (this.list.length < res.data.total) {
            this.pageInfo.current++;
          }
        }
        uni.hideLoading();
      });
    }
  },
  activated () {}
}
</script>

<style lang="scss" scoped>
  .freeStore-list {
    min-height: 100vh;
    .main-wrap {
      background-color: #FFFFFF;
      padding-left: 28rpx;
      .item-wrap {
        padding: 20rpx 0;
        border-bottom: 2rpx solid #E1E1E1;
        .member-info {
          margin-left: 16rpx;
          display: flex;
          .left {
            width: 86rpx;
            height: 86rpx;
            border-radius: 50%;
            .img {
              width: 86rpx;
              height: 86rpx;
              border-radius: 50%;
            }
          }
          .middle {
            flex: 1;
            
            margin-left: 16rpx;
            .top {
              display: flex;
              align-items: center;
              // flex-direction: column;
              // justify-content: center;
              .name {
                max-width: 250rpx;
                display: inline-block;
                white-space: nowrap; /*内容超宽后禁止换行显示*/
                overflow: hidden; /*超出部分隐藏*/
                text-overflow:ellipsis;/*文字超出部分以省略号显示*/
                font-size: 30rpx;
                color: #333333;
                font-family:PingFang SC;
                font-weight:500;
              }
              .mobile {
                display: inline-block;
                margin-left: 16rpx;
                font-size: 26rpx;
                color: #666666;
                font-family:PingFang SC;
                font-weight:500;
              }
            }
            
            .date {
              font-size: 24rpx;
              color: #999999;
              font-family:PingFang SC;
              font-weight:500;
            }
          }
          .right {
            width: 200rpx;
            display: flex;
            margin-right: 28rpx;
            justify-content: flex-end;
            // align-items: flex-end;
            // flex-direction: column;
            text-align: right;
            .status-info {
              // width: 200rpx;
              display: inline-block;
              font-size: 26rpx;
              font-family: PingFang SC;
              font-weight: 500;
              .status-success {
                color: #FFA173;
              }
              .status-fail {
                color: #FF7374;
              }
              .status-reject {
                color: #999999;
              }
              .status-wait {
                color: #1F8EDD;
              }
            }
          }
        }
      }
    }
    .noDate {
      height: 100vh;
      background-color: #FFFFFF;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .img {
        width: 340rpx;
        height: 340rpx;
      }
    }
  }
</style>